<template>
  <div class="global-map">
    <baidu-map class="map" :center="position" :zoom="zoom" :scroll-wheel-zoom="true">
      <!--地图点-->
      <bm-marker v-for="item in mapData"
                 :key="item.id"
                 :icon="{url: item.status==0?mapIconError:item.status==3?mapIconSuccess:mapIconWarning, size: {width: 32, height: 32}}"
                 :position="{lat:item.lat,lng:item.lng}"
                 @click="infoWindowOpen(item)">
      </bm-marker>
      <!--详情弹框-->
      <bm-info-window :show="mapViewShow"
                      :position="{lng: mapView.lng, lat: mapView.lat}"
                      @close="infoWindowClose"
                      @open="infoOpen">
        <div class="map-info-box">
          <div><span>经营单位名称：</span>{{mapView.jddwmc}}</div>
          <div><span>地址：</span>{{mapView.door}}</div>
          <div><span>最后清洗日期：</span>{{mapView.bgsj}}</div>
        </div>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
import mapIconError from './../../assets/img/map_icon_error.png'
import mapIconSuccess from './../../assets/img/map_icon_success.png'
import mapIconWarning from './../../assets/img/map_icon_warning.png'
export default {
  name: "globalMap",
  props:{
    mapData:{
      type:Array,
      default:()=>{
        return []
      }
    },
    position:{
      type:Object|String,
      default:()=>{
        return '南昌';
      }
    },
    zoom:{
      type:Number,
      default:12,
    }
  },
  data(){
    return{
      mapViewShow:false,
      mapView:{},
      mapIconWarning,
      mapIconSuccess,
      mapIconError,
    }
  },
  methods:{
    infoOpen(){
      this.mapViewShow = true;
    },
    infoWindowOpen(item){
      console.log(item)
      this.mapViewShow = true;
      this.mapView = item;
    },
    infoWindowClose(){
      this.mapViewShow = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.global-map{
  width: 100%;
  height: 100%;
  .map{
    width: 100%;
    height: 100%;
  }
  .anchorBL{
    display: none !important;
  }
  .map-info-box{
    margin-right: 20px;
    >div{
      margin-bottom: 5px;
      span{
        font-weight: bolder;
      }
    }
  }
}
</style>
<style lang="scss">
.map {
  .anchorBL {
    display: none !important;
  }
}
</style>